DWEI5_Aula10_JS-Funcoes-Eventos-Canvas


	Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br

1. Funções¶

Para aprofundar no assunto, consulte Javscript.info.
As funções são blocos de construção fundamentais em Javascript.
As funções são definidas utilizando-se a palavra function, seguida do nome e lista de argumentos caso exista. (Verbo + Substantivo)
Os parâmetros passados podem ser primitivos ou não primitivos (array, objeto). Se houver alteração das propriedades do objeto dentro da função, estas são vistas fora dela também.
Sintaxe:

function nomeFunção([argumentos])) {
    ... declarações
};

1.1. Exemplos¶

// ****************************
// Criando de forma literal 
// ****************************
let corOlhos = "azul";
function resetarCor() {
    corOlhos = "";
};
console.log(corOlhos);
resetarCor();
console.log(corOlhos);


// ****************************
// Armazenando em uma variável 
// ****************************
let corOlhos = "azul";
const funcao2 = function resetarCor() {
    return corOlhos = "";
};
console.log(corOlhos);
console.log("Função2: ", funcao2.resetarCor);
console.log(funcao2.corOlhos);

// Outro exemplo
let y = function() {
    ... 
};

// ****************************
// Armazenando em um array
// ****************************
let a = [ function(a, b) { 
            return 1+b; 
          }, funcao1, funcao2];

// ****************************
// Armazenando em um atributo de um objeto 
// ****************************
const obj = {}
obj.mostrar = function() {
    return "Hello"; 
};
console.log(obj.mostrar());

// ****************************
// Passando uma função como parâmetro 
// ****************************
function correr(funcao) {
    funcao()
}
correr(function() { console.log('Correndo...') });

// ****************************
// Uma função pode retornar/conter uma função 
// ****************************
function soma(a, b) {
    return function(c) {
        console.log(a + b + c);
    }
};
soma(2, 3)(4);

// ****************************
// Parâmetros e retornos são opcionais - Usando template string ${ } 
// ****************************
function area(larg, alt) {
    const area = larg * alt;
    if (area > 20) {
        console.log(`Valor ${area}m2 acima do permitido!`);
    } else {
        return area;
    }
}
console.log(area(2,2));
console.log(area(2));
console.log(area());
console.log(area(2, 3, 22, 44, 55));
console.log(area(5, 5));  

// ****************************
// Parâmetros variáveis 
// ****************************
function soma() {
    let soma = 0;
    for (i in arguments) {
        soma += arguments[i];
    }
    return soma;
}

console.log(soma(1, 2, 3));  
console.log(soma(1.1, 2.3, 3.6));  
console.log(soma());  
console.log(soma(1));  
console.log(soma(1, 2, "Teste"));

1.2. Funções Arrow¶

Exemplos:

// **********Exemplo 1******************
let mult = function(a) {
    return 2 * a;
}
console.log(mult(2))  // 4

// **********Exemplo 2******************
mult = (a) => {
    return 2 * a;
 }
console.log(mult(5));

// **********Exemplo 3******************
mult = a => 2 * a
a => 2 * a
console.log(mult(4));

// **********Exemplo 4******************
(a) => {
    return 2 * a;
}


// Sem arrow funtcion
const nomes = [
    {id: 1, nome: "Ana"},
    {id: 2, nome: "Paula"},
    {id: 3, nome: "Ana"}
];

console.log(nomes.find(function(nome){
    return nome.nome === 'Ana'
}));


// Com arrow function
const nomes = [
    {id: 1, nome: "Ana"},
    {id: 2, nome: "Paula"},
    {id: 3, nome: "Ana"}
];

console.log(nomes.find((nome) => {
    return nome.nome === 'Ana'
}));


// Se for somente um parâmetro, pode remover os parenteses.
console.log(nomes.find(nome => {
    return nome.nome === 'Ana'
}));


// Ou ainda
console.log(nomes.find(nome => nome.nome === 'Ana');

// caso não tivesse parâmetro, utilizar parênteses vazios
console.log(nomes.find(() => nome.nome === 'Ana');

1.3. Funções imediatas¶

Para aprofundamento do assunto, consulte Pedro Araújo - Funções imediatas JavaScript (IIFE).
De acordo com [Pedro Araujo], " IIFE significa Immediately-invoked function expression ".
Por que usar funções imediatas?
- Segundo [Pedro Araujo], por causa do "Encapsulamento! Tenha em mente que variáveis em Javascript têm como escopo a função da qual elas foram definidas (podem ser acessadas somente dentro da função, jamais fora). Ao criar uma função anônima com execução imediata, podemos criar um escopo temporário para nossas funções e variáveis. Com isso evitamos poluição no nosso escopo global e possíveis conflitos de variáveis ou funções com o mesmo nome".
Sintaxe:

(function(){})();

// Exemplo 1
(function(){
    let nome = prompt("Indique seu nome: ");
    let x = 'Seja bem vindo,';
    console.log(x, nome);
})();

Saída:

1.4. Exercícios¶

1.4.1. Exercício 1¶

Crie um programa que receba um número e indique se é número primo. Um número é considerado primo quando é divisível somente por 1 e por ele mesmo. Liste os números primos dentro de um intervalo, solicitando o valor máximo.

maximo = prompt("Indique o numero: ");
exibirPrimo(maximo);

function exibirPrimo(maximo) {
    console.log("** Números primos entre 0 e", maximo, "**");
    for (let numero=2; numero <= maximo; numero++) {
        if (numeroPrimo(numero)) console.log(numero);
    }
}

function numeroPrimo(numero) {
    for (let divisor = 2; divisor < numero; divisor++) {
        if (numero % divisor === 0) {
            return false;
        }
    }
    return true;
}

1.4.2. Exercício 2¶

Elabore um programa que solicite o nome completo, o endereço completo e exiba estas informações no console. Utilize objeto e funções.

const nome = prompt("Informe seu nome completo: ")
let endereco = {
    logradouro : prompt("Indique o nome da rua: "),
    numero : prompt("Indique o número: "),
    bairro : prompt("Indique o bairro: "),
    cidade : prompt("Indique cidade: "),
}


function exibir(nome, endereco) {
    console.log(nome);
    for (let chave in endereco)
        console.log(chave, endereco[chave]);
}

exibir(nome, endereco);

1.5. Funções de Fábrica¶

Dentro do paradigma de orientação a objetos, temos o padrão de projeto conhecido como, Factory.
Já sob o paradigma funcional, pode-se utilizar o padrão de projeto conhecido como Factory Functions.
As factory functions são funções que encapsulam as informações dentro de um método e retornam um objeto literal.
Vantagens: Otimização, e melhor manutenção do código, alterando somente em um lugar, no caso, no construtor.
Quando as chaves do objeto forem iguais aos nomes das variáveis recebidas na função, não é necessário efetuar a atribuição, basta indicar os nomes das chaves.
Para os casos de funções dentro do objeto, basta indicar o nome das funções, sem adicionar a palavra function.
Seguindo exemplos de Canal Dev Aprender.
Efetuando o cadastro de diversos objetos do tipo celular por meio do uso de factoty function.

Factory Function com hardcode¶

// Funcão criarCelular, com hardcode.
function criarCelular() {
    const celular = {
        marcaCelular: 'ASUS',
        tamanhoTela: {
            vertical: 155,
            horizontal: 75
        },
        capacidadeBateria: 5000,
        ligar: function() {
            console.log("Efetuando a ligação ...")
        }
    }
    return celular;
}
criarCelular();
console.log(celular);

Factory Function sem hardcode¶

```javascript // Funcão criarCelular, sem hardcode, usando padrão Factory Function. function criarCelular(marcaCelular, tamanhoTela, capacidadeBateria) { return { marcaCelular, tamanhoTela, capacidadeBateria, ligar() { console.log("Efetuando a ligação ..."); } } }

const celular1 = criarCelular('Zenfone', 5.5, 5000) console.log(celular1);

1.6. Funções de Construtores¶

Construct Functions são similares a Factory Function, porém são escritas de outra forma de codificação.
Até o momento utilizamos a escrita com o padrão de Camel case (umDoisTres).
Observação: Para Construct Functions, utiliza-se o Pascal case (UmDoisTres).
Utiliza a criação de um objeto por meio de new nomefuncao().

// Construct Functions
function Celular(marcaCelular, tamanhoTela, capacidadeBateria) {
    this.marcaCelular = marcaCelular,
    this.tamanhoTela = tamanhoTela,
    this.capacidadeBateria = capacidadeBateria,
    this.ligar = function() {
        console.log("Efetuando ligação ...")
    }
}

const celular = new Celular('Zenfone', 5.5, 5000)
console.log(celular);

1.6.1. Exercício 3¶

Comparando Strings

// Construtor de Função
function Endereco(endereco) {
    this.logradouro = endereco.logradouro,
    this.numero = endereco.numero,
    this.bairro = endereco.bairro,
    this.cidade = endereco.cidade
}

// variável endereco1
let endereco1 = new Endereco({
    logradouro : prompt("Indique o nome da rua: "),
    numero : prompt("Indique o número: "),
    bairro : prompt("Indique o bairro: "),
    cidade : prompt("Indique cidade: "),
});

// variável endereco2
let endereco2 = new Endereco({
    logradouro : 'Avenida das margaridas',
    numero : '1987',
    bairro : 'Vila das Flores',
    cidade : 'Bragança Paulista'
});


// funcao para verificar se os endereços são iguais
function saoIguais(endereco1, endereco2) {
    // comparando propriedades
    return endereco1.logradouro === endereco2.logradouro && 
    endereco1.cidade === endereco2.cidade &&
    endereco1.numero === endereco2.numero
}
console.log(saoIguais(endereco1, endereco2))  // true: endereços possuem valores iguais. Digitei mesmos valores.
// Saída: true

function enderecoReferencia(endereco1, endereco2) {
    // comparando endereco de memoria - referencia
    return endereco1 === endereco2
}
console.log(enderecoReferencia(endereco1, endereco2)) // false: aponta para endereco de memoria diferentes
// Saída: false

// variável endereco3
const endereco3 = endereco1;

function enderecoReferencia1(endereco1, endereco3) {
    // comparando endereco de memoria - referencia
    return endereco1 === endereco3
}
console.log(enderecoReferencia1(endereco1, endereco3)) // true: aponta para o mesmo endereco de memoria 
// Saída: true

1.7. Objetos - Exercício 4¶

Seguindo exemplos de Canal Dev Aprender.
Criar um programa que simule a postagem em um blog. O objeto a ser criado deve conter:
- título
- mensagem
- autor
- número de vizualizações
- comentários (autor, mensagens) >> array
- estado (aovivo ou não)

// criando o objeto
let x = 0;
let continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;


while (continuar != 'N') {
    let postagem = {
        titulo: prompt("Indique o título da postagem: "),
        mensagem: prompt("Informe a mensagem: "),
        autor: prompt("Indique o autor: ") ,
        visualizacoes: x +=1,
        comentarios: [
            { autor: prompt("Indique autor comentário1: "), mensagem: prompt("Informe a mensagem1: ")},
            { autor: prompt("Indique autor comentário2: "), mensagem: prompt("Informe a mensagem2: ")},
        ],
        estado: true
    };
    console.log(postagem);
    continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;
}

1.7.1. Exercício 5¶

Seguindo exemplos de Canal Dev Aprender.
Criar um programa que exiba faixas de preços com definições de valores mínimos e máximos. Além de exibir dicas.

let faixas1 = [
{
    tooltip : 'até R$ 700', 
    minimo : 0,
    maximo : 700,
},
{
    tooltip : 'R$ 700 até R$ 1000', 
    minimo : 700,
    maximo : 1000,
},
{
    tooltip : 'acima de R$ 1000', 
    minimo : 1000,
    maximo : 9999999999,
}
];

console.log(faixas1);


// Resolvendo com
// Usando Factory Function
function criarFaixaPreco(tooltip, minimo, maximo) {
    return {
        tooltip,
        minimo,
        maximo
    }
}

let faixas2 = [
    criarFaixaPreco('até R$ 700', 0, 700),
    criarFaixaPreco('R$ 700 até R$ 1000', 700, 1000),
    criarFaixaPreco('acima de R$ 1000', 1000, 9999999999),
]
console.log(faixas2);


// Resolvendo com
// Usando Contructor
function FaixaPrecos(tooltip, minimo, maximo) {
    this.tooltip = tooltip,
    this.minimo = minimo,
    this.maximo = maximo
}
let faixas3 = new FaixaPrecos('até R$ 700', 0, 700)
console.log(faixas3);

let faixas4 = new FaixaPrecos('R$ 700 até R$ 1000', 700, 1000)
console.log(faixas4);

let faixas5 = new FaixaPrecos('acima de R$ 1000', 1000, 9999999999)
console.log(faixas5);

1.7.2. Exercício 5 - Outra solução¶

let faixas1 = [
{
    tooltip : 'até R$ ', 
    minimo : 0,
    maximo : prompt("Indique o valor máximo: "),
},
{
    tooltip : 'R$ ', 
    minimo : 500,
    maximo : prompt("Indique o valor máximo para segunda pesquisa: "),
},
{
    tooltip : 'acima de R$ ', 
    minimo : 1000,
    maximo : 9999999999,
}
];

faixas1[0].tooltip += String(faixas1[0].maximo);

faixas1[1].tooltip += String(faixas1[0].maximo) + ' até R$ '+ String(faixas1[1].maximo);
faixas1[1].minimo = faixas1[0].maximo;

faixas1[2].tooltip += String(faixas1[1].maximo);
faixas1[2].minimo = faixas1[1].maximo;

console.log(faixas1);

2. Scripts JS¶

Para aprofundamento do assunto, consulte Javascript.info.
Consulte também a referência MDN Web Docs.

2.4. Carregamento do DOM e recursos¶

2.4.1. Ciclo de vida¶

O ciclo de vida do carregamento de uma página, consiste em 3 eventos importantes:
- DOMContentLoaded: onde o navegador carrega totalmente o HTML, e a árvore DOM é constituída, porém recursos externos como imagens, estilos ainda não podem ser carregados.
- load: além do carregamento do HTML, os recursos externos são carregados: imagens, estilos etc.
- beforeunload/unload: o usuário está saindo da página:
  - beforeunload: podemos verificar se o usuário salvou as alterações e perguntar se realmente deseja sair.
  - unload: o usuário quase saiu, mas ainda podemos iniciar algumas operações, como o envio de estatísticas.

2.4.2. Evento window.onload¶

O evento load no objeto window é acionado quando a página inteira é carregada, incluindo estilos, imagens e outros recursos. Este evento está disponível através da propriedade onload.
Exemplo copiado do site [Javascript.info]:

<script>
  window.onload = function() { // same as window.addEventListener('load', (event) => {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

2.4.3. Evento window.onunload¶

O evento unload no objeto window é acionado quando usuário sai da página.

2.5. Outros eventos¶

Javascript.info - Diversos.

2.6. Biblioteca Math¶

Para saber mais a respeito da biblioteca Math, sobre suas propriedades, métodos, consulte MDN Web Docs.
Exemplos:

Math.random()
Math.max(2,5,8,10,4)
Math.min(10,3,15,18)

3. Desenhando com canvas¶

Para aprofundamento, consulte o MDN Web Docs - Tutorial.

3.1. Canvas¶

O canvas é um elemento novo em HTML5, lançado em 2013, que permite que se desenhem elementos gráficos usando Javasccript.
Utilizado para renderizar texto, imagens, gráficos, linhas gradientes e outros efeitos dinamicamente.
Desenhar na tela se dá através da API de tela 2D. Essa API contém uma variedade de funções que fornecem o poder de se desenhar praticamente o que se queira na tela.

3.1.1. Estrutura básica do Canvas¶

Caso não seja definido a largura ou altura do elemento canvas, o atributo de largura padrão é 300 e o atributo de altura padrão é 150.
O elemento < canvas > pode ser estilizado como qualquer imagem.
Porque usar as definições de largura e altura na própria tag do canvas ? E não no CSS ?
- Se utilizarmos o CSS, o elemento pode ser redimensionado, mas durante a renderização a imagem é escalonada para caber no tamanho do layout. Logo, é distorcida.
- Nota: Se as suas renderizações parecerem distorcidas, tente especificar os atributos width e height no < canvas > e não usando CSS. Stackoverflow.
  - Atualização da Especificação HTML5 - Canvas de 15 de julho de 2020: HTML - Living Standard >> 4.12.5 The canvas element.

É uma tag similar as demais < div >, < table > com exceção do conteúdo que são renderizados com javascript.
Em outras palavras, devemos incluir a tag < canvas > < /canvas > em nosso arquivo index.html, e criar uma função inicializadora para acessar o canvas quando a página é carregada, e usar a API para desenhar a visualização.

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let context = canvas.getContext("2d");

  // Inserir seu código js aqui
};

3.1.2. Desenhando formas simples¶

Retângulos¶

Nome Função	Descrição	Retorno
clearRect(a, b, c, d)	Limpa um retângulo específico.	Não há retorno algum.
fillRect(a, b, c, d)	Desenha um retângulo preenchido.	Não há retorno algum.
strokeRect(a, b, c, d)	Desenha um retângulo não preenchido.	Não há retorno algum.

3.1.2.1. Exemplo de Linhas e Retângulos¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let x = 10;
  let y = 50;
  let count = 5;

  for (let i = 0; i < count; i++) {
    ctx.fillRect(i * (x + y) + x, x, y, y);
    ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
    ctx.clearRect(i * (x + y) + x, x + 5, y, y - 10);
  }
};

Saída:

Definindo estilos¶

Nome Função	Descrição	Valores padrões
fillStyle	Define o estilo utilizado para preencher as formas.	black
lineJoin	Define o estilo utilizado para uniões de linhas.	miter
lineWidth	Define a espessura das linhas.	1.0
strokeStyle	Define o estilo utilizado para linhas.	black

3.1.2.2. Exemplo com Espessuras de Linhas¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  ctx.lineWidth = 4;
  ctx.strokeRect(10, 10, 50, 50);
  ctx.lineWidth = 6;
  ctx.strokeRect(70, 10, 50, 50);
  ctx.lineWidth = 8;
  ctx.strokeRect(130, 10, 50, 50);
  ctx.lineWidth = 10;
  ctx.strokeRect(190, 10, 50, 50);
};

Saída:

3.1.2.3. Exemplo com Junções de Linhas¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  ctx.lineWidth = 20;
  ctx.lineJoin = "round";
  ctx.strokeRect(20, 20, 100, 100);
  ctx.lineJoin = "bevel";
  ctx.strokeRect(160, 20, 100, 100);
  ctx.lineJoin = "miter";
  ctx.strokeRect(300, 20, 100, 100);
};

Saída:

3.1.2.4. Exemplo com Preenchimento¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let x = 10;
  let y = 50;
  let count = 5;
  ctx.lineWidth = 3;
  let interiorCores = ["black", "blue", "gray", "red", "green"];
  let linhasCores = ["rgb(0, 0, 0)", "rgb(100, 100, 100)", "rgb(0, 0, 255)", "rgb(255, 0, 0)", "rgb(0, 255, 0)"];

  for (let i = 0; i < count; i++) {
    ctx.fillStyle = interiorCores[i];
    ctx.strokeStyle = linhasCores[i];
    ctx.fillRect(i * (x + y) + x, x, y, y);
    ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
};

Saída:

Definindo Gradientes¶

Nome Função	Descrição	Retorno
createLinearGradient(x0, y0, x1, y1)	Cria um gradiente linear.	CanvasGradient
createRadialGradient(x0, y0, r0, x1, y1, r1)	Cria um gradiente radial.	CanvasGradient
addColorStop(position, cor)	Adiciona cores sólidas a linhas gradientes.	Não retorna nada.

3.1.2.5. Exemplo com Gradientes Linear¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(0, 0, 500, 140);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(0, 0, 500, 140);
};

Saída:

3.1.2.6. Exemplo com Gradientes Radial¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(0, 0, 500, 140);
};

Saída:

3.1.2.7. Exemplo com Gradientes Linear e Radial¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(250, 70, 200, 160);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(150, 20, 75, 100);
  ctx.lineWidth = 8;
  ctx.strokeStyle = gradiente;
  ctx.strokeRect(250, 20, 75, 100);

  let gradienteR = ctx.createRadialGradient(250, 150, 20, 200, 100, 100);
  gradienteR.addColorStop(0, "green");
  gradienteR.addColorStop(0.3, "blue");
  gradienteR.addColorStop(0.5, "white");
  gradienteR.addColorStop(0.7, "orange");
  gradienteR.addColorStop(1, "red");
  ctx.fillStyle = gradienteR;
  ctx.fillRect(150, 150, 75, 100);
  ctx.lineWidth = 8;
  ctx.strokeStyle = gradienteR;
  ctx.strokeRect(250, 150, 75, 100);
};

Saída:

Definindo Padrões¶

Nome Função	Descrição
createPattern(imagem, repeticao)	Cria um padrão conforme a imagem passada.
repeat	A imagem será repetida na vertical e horizontal.
repeat-x	A imagem será repetida somente na horizontal.
repeat-y	A imagem será repetida somente na vertical.
no-repeat	A imagem será repetida não será repetida.

3.1.2.8. Exemplo com Padrões¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <img src="bola.jpg" hidden id="bola">    <!-- Adicionado -->
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let imagemElemento = document.getElementById("bola");
  let padrao = ctx.createPattern(imagemElemento, "repeat");  /* propriedade a ser modificada */
  ctx.fillStyle = padrao;
  ctx.fillRect(0, 0, 500, 140);
};

Saída:
let padrao = ctx.createPattern(imagemElemento, "repeat");

let padrao = ctx.createPattern(imagemElemento, "repeat-x");

let padrao = ctx.createPattern(imagemElemento, "repeat-y");

let padrao = ctx.createPattern(imagemElemento, "no-repeat");

3.1.2.9. Exemplo com Padrões em formas geométricas¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <img src="bola.jpg" hidden id="bola">    <!-- Adicionado -->
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let imagemElemento = document.getElementById("bola");
  let padrao = ctx.createPattern(imagemElemento, "repeat");
  ctx.fillStyle = padrao;
  ctx.fillRect(50, 16, 180, 165);
  ctx.lineWidth = 20;
  ctx.strokeStyle = padrao;
  ctx.strokeRect(350, 20, 175, 150);

};

Saída:

Salvando e Restaurando Estados¶

Nome Função	Descrição
save()	Salva os valores para as propriedades do estado do desenho e os organiza na pilha de estados.
restore()	Pega o primeiro conjunto de valores da pilha de estados e os utiliza para definir o estado de desenho.

3.1.2.10. Exemplo com Save e Restore¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <div>                                 <!-- Adicionado -->
    <button>Save</button>               <!-- Adicionado -->
    <button>Restore</button>            <!-- Adicionado -->
  </div>                                <!-- Adicionado -->  
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}

/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(500, 0, 500, 140);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  let interiorCores = ["black", gradiente, "blue", "gray", "red", "green", "grey"];
  let indexador = 0;
  ctx.fillStyle = interiorCores[indexador];
  draw();
  let botoes = document.getElementsByTagName("button");
  for (let i = 0; i < botoes.length; i++) {
    botoes[i].onclick = botaoPress;
  }

  function botaoPress(e) {
    switch (e.target.innerHTML) {
      case 'Save':
        ctx.save();
        indexador = (indexador + 1) % interiorCores.length;
        ctx.fillStyle = interiorCores[indexador];
        draw();
        break;

      case 'Restore':
        indexador = Math.max(0, indexador-1);
        ctx.restore();
        draw();
        break;
    }
  }

  function draw() {
    ctx.fillRect(0, 0, 500, 140);
  }
};

Saída:

Ao pressionar o botão Save, a cor é modificada para outra contida no array interiorCores. E se for pressionado o Restore, ele exibe a cor anterior salva.

DrawImage¶

Nome Função	Descrição
drawImage(imagem, x, y)	Desenha a imagem a partir das coordenadas (x, y).
	Existem outras combinações para drawImage(). Os 3o. e 4o. parâmetros opcionais do método drawImage() controlam a escala da imagem.

3.1.2.11. Exemplo com Desenhando Imagens a partir de Video¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
    <video id="vid" src="timessquare.webm" controls preload="auto" width="360" height="240"></video>
    <div>
        <button id="pressme">Tirar Foto</button>
    </div>
    <canvas id="myCanvas" width="360" height="240"></canvas>

  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
  float: left;
}

/* Arquivo js.js - Modificado */
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  let imagemElemento = document.getElementById("vid");

  /* Inserir seu código aqui */
  document.getElementById("pressme").onclick = function (e) {
    ctx.drawImage(imagemElemento, 0, 0, 360, 238);
  }
};

Saída:

Enquanto o video está sendo executado, ao pressionar o botão Foto, as imagens são capturadas e exibidas no canvas à direita.

3.1.2.12. Exemplo com Desenhando Imagens sobre um Video¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
  <video id="vid" src="timessquare.webm" controls auto width="360" height="240"></video>
  <canvas id="myCanvas" width="360" height="240"></canvas>

<script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
  float: left;
}

/* Arquivo js.js - Modificado */
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  let imagemElemento = document.getElementById("vid");

  /* Inserir seu código aqui */
  let width = 100;
  let height = 10;
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";

  setInterval(function () {
    ctx.drawImage(imagemElemento, 0, 0, 360, 238);
    ctx.strokeRect(180 - (width/2), 120 - (height/2), width, height);
  }, 25);

  setInterval(function () {
    width = (width + 1) % 200;
    height = (height + 3) % 200;
  }, 100);
};

Saída:

Enquanto o video está sendo executado à esquerda, o mesmo é reproduzido à direita porém, com um desenho de canvas sobre ele.

3.1.2.13. Exemplo Unindo as variações anteriores¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
  <div>
    <video id="vid" src="timessquare.webm" controls autoplay width="360" height="240"></video>
  </div>
  <div>
    <canvas id="myCanvas1" width="360" height="240"></canvas>
    <button id="pressme">Foto</button>
    <canvas id="myCanvas2" width="360" height="240"></canvas>
  </div>
  <script src="js/js.js"></script>
</body>
</html>

/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Arquivo js.js - Modificado */
  let srcCanvas = document.getElementById("myCanvas1");
  let ctx1 = srcCanvas.getContext("2d");
  let ctx2 = document.getElementById("myCanvas2").getContext("2d");
  let imagemElemento = document.getElementById("vid");

  document.getElementById("pressme").onclick = takePicture;

  /* Inserir seu código aqui */
  let width = 100;
  let height = 10;
  ctx1.lineWidth = 5;
  ctx1.strokeStyle = "red";
  ctx2.lineWidth = 30;
  ctx2.strokeStyle = "black";

  setInterval(function () {
    ctx1.drawImage(imagemElemento, 0, 0, 360, 240);
    ctx1.strokeRect(180 - (width/2), 120 - (height/2), width, height);
  }, 25);

  setInterval(function () {
    width = (width + 1) % 200;
    height = (height + 3) % 200;
  }, 100);

  function takePicture() {
    ctx2.drawImage(srcCanvas, 0, 0, 360, 240);
    ctx2.strokeRect(0, 0, 360, 240);
  }
};

Saída:

Enquanto o video está sendo executado à esquerda, o mesmo é reproduzido à abaixo, à esquerda com um desenho sobre, e à direita será exibido a foto ao pressionar o botão foto.

Criando caminhos Path¶

Nome Função	Descrição
beginPath()	Inicia um novo caminho.
closePath()	Fecha um caminho existente da primeira linha desenhada até a última.
fill()	Preenche as formas de subpaths.
isPointInPath(x, y)	Retorna verdadeiro se o ponto existe no caminho da forma desenhada.
lineTo(x, y)	Desenha uma subPath com as coordenadas indicadas.
moveTo(x, y)	Posiciona o cursor na coordenada especidicada.
rect(x, y, w, z)	Desenha um retângulo com início nos pontos (x, y), e com final nas coordenadas (w, z).
stroke()	Desenha a linha externa das formas.

Outras Propriedades¶

Nome Função	Descrição
font = "bold 12px sans-serif"	Pode ser qualquer coisa que você colocaria na regra font do CSS. Incluindo font style, font variant, font weight, font size, line height, e font family.
textAlign = "right"	Controla o alinhamento do texto. É parecido (mas não idêntico) a regra text-align do CSS. Os possíveis valores são start, end, left, right, e center.
textBaseline = "bottom"	Controla onde o texto é desenhado relativo ao ponto de início. Os possíveis valores são top, hanging, middle, alphabetic, ideographic, ou bottom.
fillText(conteudo, posicao x, posicao y)	desenha o texto de fato.

3.1.2.14. Exemplo Desenhando Linhas¶

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Desenhando com Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <canvas id="myCanvas" width="500" height="600">Sem suporte a canvas</canvas>
    <script src="js/js1.js"></script>
</body>
</html>

/* Arquivo estilo.css   -   Modificado */  
#myCanvas {
      border : 10px solid #555
    }

/* Arquivo js.js - Modificado */
    let canvas = document.getElementById("myCanvas1");
    let ctx = canvas.getContext("2d");

    //Desenhando linhas verticais
    for (let x = 0.5; x < 500; x += 10)
    {
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 600);
    }
    //Desenhando linhas horizontais
    for (let y = 0.5; y < 600; y += 10)
    {
      ctx.moveTo(0, y);
      ctx.lineTo(600, y);
    }

    ctx.strokeStyle = "#eee";
    ctx.stroke();

    // Desenhando uma seta na Horizontal
    ctx.beginPath();
    ctx.moveTo(0, 40);
    ctx.lineTo(240, 40);
    ctx.moveTo(260, 40);
    ctx.lineTo(500, 40);
    ctx.moveTo(495, 35);
    ctx.lineTo(500, 40);
    ctx.lineTo(495, 45);

    // Desenhando uma seta na Vertical
    ctx.moveTo(60, 0);
    ctx.lineTo(60, 153);
    ctx.moveTo(60, 173);
    ctx.lineTo(60, 375);
    ctx.moveTo(65, 370);
    ctx.lineTo(60, 375);
    ctx.lineTo(55, 370);

    ctx.strokeStyle = "#000";
    ctx.stroke();


    //Desenhando x, y, e as coordenadas
    ctx.font = "bold 12px sans-serif";
    ctx.fillText("x", 248, 43);
    ctx.fillText("y", 58, 165);

    ctx.textBaseline = "top";
    ctx.fillText("( 0 , 0 )", 8, 5);

    ctx.textAlign = "right";
    ctx.textBaseline = "bottom";
    ctx.fillText("( 500 , 375 )", 492, 370);
};

Saída:

3.2. Animação com Javascript¶

Para visualizar exemplos, consulte Javascript.info.

4. Usando XML com CSS¶

<!-- Arquivo index.xml --> 

<?xml version="1.0"?>
<!-- XML demonstration -->

<?xml-stylesheet type="text/css" href="estilo.css"?>

<!DOCTYPE planet>
<planet>

<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>

<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>

<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>

</planet>

/* Arquivo estilo.css */
/* ** XML demonstration ** */

planet:before {
  display: block;
  width: 8em;
  font-weight: bold;
  font-size: 200%;
  content: "Oceans";
  margin: -.75em 0px .25em -.25em;
  padding: .1em .25em;
  background-color: #cdf;
  }

planet {
  display: block;
  margin: 2em 1em;
  border: 4px solid #cdf;
  padding: 0px 1em;
  background-color: white;
  }

ocean {
  display: block;
  margin-bottom: 1em;
  }

name {
  display: block;
  font-weight: bold;
  font-size: 150%;
  }

area {
  display: block;
  }

area:before {
  content: "Area: ";
  }

area:after {
  content: " million km\B2";
  }

depth {
  display: block;
  }

depth:before {
  content: "Mean depth: ";
  }

depth:after {
  content: " m";
  }

Saída:

Referências¶

Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.
Criando Formulários a partir do objeto MDN Web Docs - FormData.
Dive into HTML5.
HTML5 Canvas Tutorials.
MDN Web Docs - Canvas Tutorial.
MDN Web Docs - CanvasRenderingContext2D.
[ADDISON, W.] - HTML5 Guidelines for Web Developers - Junho 2011
[FREEMAN, A.] - The Definitive Guide to HTML5 - Editora Apress
[SILVA, O. J.] - HTML 4.0 e XHTML 1.0 Domínio e Transição - Editora Erica.

Perguntas¶

Esclareça suas eventuais dúvidas durante as aulas.
Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
Ou pelo Fórum do componente curricular.

ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

AULA 10 - FUNÇÕES, EVENTOS E DESENHANDO COM CANVAS¶

Agenda¶

1. Funções¶

1.1. Exemplos¶

1.2. Funções Arrow¶

1.3. Funções imediatas¶

1.4. Exercícios¶

1.4.1. Exercício 1¶

1.4.2. Exercício 2¶

1.5. Funções de Fábrica¶

Factory Function com hardcode¶

Factory Function sem hardcode¶

1.6. Funções de Construtores¶

1.6.1. Exercício 3¶

1.7. Objetos - Exercício 4¶

1.7.1. Exercício 5¶

1.7.2. Exercício 5 - Outra solução¶

2. Scripts JS¶

2.1. Utilizando o DOM¶

2.2. Utilizando Eventos¶

2.3. Utilizando Controle de Formulários¶

2.4. Carregamento do DOM e recursos¶

2.4.1. Ciclo de vida¶

2.4.2. Evento window.onload¶

2.4.3. Evento window.onunload¶

2.5. Outros eventos¶

2.6. Biblioteca Math¶

3. Desenhando com canvas¶

3.1. Canvas¶

3.1.1. Estrutura básica do Canvas¶

3.1.2. Desenhando formas simples¶

Retângulos¶

3.1.2.1. Exemplo de Linhas e Retângulos¶

Definindo estilos¶

3.1.2.2. Exemplo com Espessuras de Linhas¶

3.1.2.3. Exemplo com Junções de Linhas¶

3.1.2.4. Exemplo com Preenchimento¶

Definindo Gradientes¶

3.1.2.5. Exemplo com Gradientes Linear¶

3.1.2.6. Exemplo com Gradientes Radial¶

3.1.2.7. Exemplo com Gradientes Linear e Radial¶

Definindo Padrões¶

3.1.2.8. Exemplo com Padrões¶

3.1.2.9. Exemplo com Padrões em formas geométricas¶

Salvando e Restaurando Estados¶

3.1.2.10. Exemplo com Save e Restore¶

DrawImage¶

3.1.2.11. Exemplo com Desenhando Imagens a partir de Video¶

3.1.2.12. Exemplo com Desenhando Imagens sobre um Video¶

3.1.2.13. Exemplo Unindo as variações anteriores¶

Criando caminhos Path¶

Outras Propriedades¶

3.1.2.14. Exemplo Desenhando Linhas¶

3.2. Animação com Javascript¶

4. Usando XML com CSS¶

Referências¶

Perguntas¶